<template>
  <el-container style="min-height: 100vh; display: flex; align-items: center; justify-content: center;">
    <el-card style="width: 80%;">
      <el-row :gutter="20">
        <el-col
          v-for="(item, index) in reportList"
          :key="index"
          :span="4"  
          style="text-align: center; margin-bottom: 20px;"
        >
          <div @click="downloadReport(item)" style="cursor: pointer;">
            <i :class="icon" style="font-size: 30px;"></i>
            <p style="margin-top: 10px;">{{ item.fileName }}</p>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </el-container>
</template>

<script>
import { getAllFile } from '@/api/statistics';
export default {
  name: 'Excel',
  data() {
    return {
      reportList: [],
      icon: 'el-icon-tickets'
    };
  },
  mounted() {
    this.fetchReportData();
  },
  methods: {
    fetchReportData(){
      const bucket = "pest-control";
      const directory = "excel/";
      getAllFile(bucket, directory)
        .then(response => {
          if(response.code === 200){
            this.reportList = response.data;
        }})
        .catch(error => {
           this.$message({
              message: response.message,
              type: 'error'
            });
        })
    },
    downloadReport(item) {
      this.$alert(`确定下载 ${item.fileName} 的报表吗？`, '提示', {
        confirmButtonText: '确定',
        showClose: true, // 显示右上角关闭按钮（默认就是 true）
        closeOnClickModal: true, // 点击遮罩关闭（可选）
        callback: (action) => {
          if(action === 'confirm'){
            window.location.href = item.url;
          }
        }
      });
    }
  }
};
</script>